@import "ozaria/site/styles/common/variables";
@import "app/styles/component_variables.scss";

:root {
  $light-grey: #6b7280;

  --color-primary: #{$purple};
  --color-primary-1: #{$purple};
  --color-primary-2: #{$purple-2};
  --color-primary-middle: #{$middle-purple};
  --color-primary-light: #{$light-purple};
  --color-primary-light-2: #{$light-purple};
  --color-dark-grey: #{$dark-grey};
  --color-dark-grey-2: #{$dark-grey-2};
  --color-light-grey: #{$light-grey};

  --color-box-shadow: #{rgba(122, 101, 252, 0.15)};
  --color-light-background: #{$light-background};
  --color-bg-gradient: #{linear-gradient(100deg, #f6f4ff 0%, #fff 100%)};

  $text-shadow: -1px 0 darken($purple, 20%), 0 1px darken($purple, 20%),
    1px 0 darken($purple, 20%), 0 -1px darken($purple, 20%);

  --text-shadow: #{$text-shadow};
  --color-primary__darken_10: #{darken($purple, 10%)};
  --color-primary-1__darken_10: #{darken($purple, 10%)};
}

body.teal-theme {
  $dark-grey: #0a2239;
  $light-grey: #6b7280;
  $blue: #4799a9;
  $blue-1: #4decf0;
  $blue-2: #6feff3;
  $middle-blue: #bdf7fa;
  $light-blue: #e6fbfc;
  $light-blue-2: #e9e8fd;
  $light-background: #f0fdfd;

  --color-primary-1: #{$blue-1};
  --color-primary: #{$blue};
  --color-primary-2: #{$blue-2};
  --color-primary-middle: #{$middle-blue};
  --color-primary-light: #{$light-blue};
  --color-primary-light-2: #{$light-blue-2};
  --color-dark-grey: #{$dark-grey};
  --color-dark-grey-2: #{$dark-grey-2};
  --color-light-grey: #{$light-grey};

  --color-box-shadow: #{rgba(77, 236, 240, 0.3)};
  --color-light-background: #{$light-background};
  --color-bg-gradient: #{linear-gradient(100deg, #f0fdfd 0%, #fff 100%)};

  --text-shadow: #{-1px 0 darken($blue, 20%), 0 1px darken($blue, 20%),
    1px 0 darken($blue, 20%), 0 -1px darken($blue, 20%)};
  --color-primary__darken_10: #{darken($blue, 10%)};
  --color-primary-1__darken_10: #{darken($blue-1, 10%)};
}

@if not $is-codecombat {
  .ozaria-button {
    width: auto;
    height: 45px;
    box-sizing: border-box;
  }

  .ozaria-primary-button,
  .style-ozaria .ozaria-primary-button {
    background-color: $teal;
    padding: 11px 19px;
    color: #f7f9f9;
    font-family: $body-font-style;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.71px;
    line-height: 24px;
  }

  .ozaria-secondary-button,
  .style-ozaria .ozaria-secondary-button {
    padding: 11px 19px;
    color: $teal;
    font-family: $body-font-style;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.71px;
    line-height: 24px;
    border: 2px solid $teal;
  }

  .style-ozaria {
    h1 {
      @include font-h-1-title-font-white;

      &.text-twilight {
        @include font-h-1-title-font-twilight;
      }

      &.text-pitch {
        @include font-h-1-title-font-twilight;
        color: $pitch;
      }
    }

    h2 {
      @include font-h-2-subtitle-black;

      &.text-twilight {
        @include font-h-2-subtitle-twilight;
      }

      &.subtitile-moon {
        @include font-h-2-subtitle-moon;
      }
    }

    h3 {
      @include font-h-3-subtitle-uppercase-twilight;
      &.text-pitch {
        color: $pitch;
      }
    }

    h4 {
      @include font-h-4-navbar-uppercase-white;

      &.navbar-uppercase-white {
        @include font-h-4-navbar-uppercase-white;
      }
    }

    p,
    li {
      @include font-p-2-paragraph-medium-white;

      &.large-twilight {
        @include font-p-1-paragraph-large-twilight;
      }

      &.medium-gray {
        @include font-p-2-paragraph-medium-gray;
      }

      &.large-gray {
        @include font-p-1-paragraph-large-gray;
      }
    }

    .small-details {
      font-size: 14px;
      color: $authGray;

      a {
        color: $authGray;
        text-decoration: underline;
      }
    }

    .model-base-flat {
      .modal-header {
        background-color: white;
      }
    }

    .row.or-row {
      display: flex;
      justify-content: center;
      align-items: center;

      margin-bottom: 15px;

      p.or {
        color: #a4a4a4;
        margin: 0;
      }

      .line {
        height: 2px;
        width: 120px;
        background-color: #f0f0f0;
        margin: 0 32px;
      }
    }

    &.modal-content {
      border-radius: 5px;
    }

    &.educator-sign-up,
    &.teacher-form {
      .form-container {
        .form-control {
          border-radius: 0px;
          border: 1px solid #379b8d;
          background: #ffffff;
          &.placeholder-text {
            color: #adadad;
          }
          &.disabled-input {
            background: #f2f2f2;
            color: #adadad;
          }
        }

        .inline-flex-form-label-div {
          // to display label and error on same line (eg: teacher onboarding forms)
          display: inline-flex;
          justify-content: space-between;
          width: 100%;
        }

        .control-label,
        .control-label-desc {
          @include font-p-3-small-button-text-black;
          font-weight: normal;
        }

        .control-label-desc {
          font-size: 12px;
          line-height: 14px;
        }

        .form-group {
          &.has-error {
            .form-error {
              @include font-p-4-paragraph-smallest-gray;
              display: inline-block;
              color: #0170e9;
            }
          }
        }

        .form-error {
          display: none;
        }

        .ozaria-primary-button {
          color: #000000;
        }

        .form-checkbox-input {
          @include font-p-4-paragraph-smallest-gray;
          input {
            width: 6%;
          }
        }
      }
    }
  }
}
